<template>
	<view>
		<view class="searchBar">
			<text class="iconfont icon-back" @tap="pBack"></text>
			<text class="iconfont icon-search"></text>
			<input type="text" placeholder="请输入课程/机构" placeholder-style="color:#a9b0ba" v-model="searchText" />
			<button type="default" @tap="search">搜索</button>
		</view>
		<view class="hotBox">
			<text class="title">热门搜索</text>
			<view class="hotCnt">
				<text v-for="(item,index) in words" :key="index" @tap="toPage" data-url="searchResult" :data-text="item.word">{{item.word}}</text>

			</view>
		</view>
		<view class="historyBox">
			<view class="title">
				<text>最近搜索</text>
				<text v-if="searchHistory && searchHistory.length>0" class="iconfont icon-lajitong" @tap="delHistory"></text>
			</view>
			<view class="hotCnt">
				<block v-if="searchHistory && searchHistory.length>0">
					<text v-for="(item,index) in searchHistory" :key="index" @tap="toPage" data-url="searchResult" :data-text="item">{{item}}</text>
				</block>
			</view>
		</view>
		<hk-modal ref="hkModal" :isCntSlot="false">

		</hk-modal>
	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	export default {
		data() {
			return {
				searchHistory: '',
				words: [],
				searchText: ''
			}
		},
		methods: {
			// 删除搜索记录
			delHistory() {
				this.$refs.hkModal.init({
					title: '确定删除',
					cntText: '确定要清空搜索记录？',
					cancle: '取消',
					confirm: '确认',
					maskClose: true,
					cancleFcn: null,
					confirmFcn: () => {
						uni.removeStorageSync("searchHistory");
						this.searchHistory = [];
					},
				})
				this.$refs.hkModal.show()

			},
			search() {
				this.searchText = this.searchText.tailCut();
				this.searchText=this.searchText.replace(/[\ |\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?]/g,"");
				if (!this.searchText) {
					uni.showToast({
						title: '请输入要搜索的内容',
						icon: 'none'
					});
				} else {
					let r = [];
					if (uni.getStorageSync("searchHistory")) {
						r = uni.getStorageSync("searchHistory");
					} else {
						r = [];
					}
					r.unshift(this.searchText);
					uni.setStorageSync("searchHistory", r);
					this.searchHistory = r;
					this.toPage({
						url: 'searchResult',
						text: this.searchText
					})
				}
			},
			getData() {
				this.$store.dispatch("apiGetSearchWord")
					.then(res => {
						this.words = res.data.data
					})
			},
			getHistory() {
				let _arr = uni.getStorageSync("searchHistory");
				var hash = [];
				for (var i = 0; i < _arr.length; i++) {
					if (hash.indexOf(_arr[i]) == -1) {
						hash.push(_arr[i]);
					}
				}
				uni.setStorageSync("searchHistory",hash);
				this.searchHistory = hash;
			}
		},
		onShow() {
			this.getHistory();
		},
		onLoad() {
			// uni.setStorageSync("searchHistory", ['少儿英语', '减肥课程'])
			this.getData()
			this.getHistory();
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.getData()
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less" scoped>
	.searchBar {
		display: flex;
		height: 90upx;
		align-items: center;
		padding-top: var(--status-bar-height);
		box-sizing: content-box;
		/* #ifdef MP */
		padding-right: 27%;

		/* #endif */
		.icon-back {
			font-size: 44upx;
			width: 90upx;
			height: 90upx;
			line-height: 90upx;
			text-align: center;
			color: #333333;
		}

		.icon-search {
			margin-right: -60upx;
			position: relative;
			z-index: 3;
			width: 60upx;
			text-align: center;
			font-size: 32upx;
			height: 90upx;
			line-height: 94upx;
			color: #a9b0ba;
		}

		input {
			height: 68upx;
			border-radius: 34upx;
			background-color: #efefef;
			flex: 1;
			padding-left: 60upx;
			font-size: 28upx;
		}

		button {
			font-size: 32upx;
			background-color: #FFFFFF;
			color: #333333;
		}

		button:after {
			border: none;
			outline: none;
		}
	}

	.hotBox,
	.historyBox {
		padding: 40upx;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 32upx;
			font-weight: bold;
			color: #333333;

			.icon-lajitong {
				color: #8c8c8c;
			}
		}
	}

	.hotBox {
		border-bottom: 1px solid #f2f2f2;
	}

	.hotCnt {
		display: flex;
		flex-wrap: wrap;
		padding-top: 16upx;

		text {
			height: 60upx;
			font-size: 24upx;
			border-radius: 30upx;
			background-color: #f6f6f6;
			color: #545454;
			line-height: 60upx;
			padding: 0 30upx;
			margin: 20upx;
		}
	}
</style>
